<template>
  <div class="row">
     <div class="col-md-12 col-md-offset-6">
      
        <input v-model='transtext' class="form-control"/>
        <button class="btn primary" @click="dotrans">翻译文本</button>
     
     
     </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      transtext:'请输入要翻译的内容',
      transedtext:''
    }
  },
  methods:{
      dotrans(){
          const url='https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180401T013116Z.6c7bee75fc508755.6463cc7949ae6323093cc385ef3526bd9568632f&text='+this.transtext+'&lang=en'
          this.$http.get(url).then( response => {
             console.log(response.body.text[0])
             this.$emit('parentclick',response.body.text[0])
          })
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
